<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue.2.6.14.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>事件绑定</h3>
					<ul class="d-list">
						<li>v-on:事件名="表达式/函数名" 绑定事件</li>
						<li>v-on: 简写为 @，如@click='f1'</li>
						<li>修饰符</li>
					</ul>
					<h3>修饰符</h3>
					<ul class="d-list">
						<li>.stop：阻止事件冒泡</li>
						<li>.prevent：阻止事件默认行为，如 a 标签的跳转行为</li>
						<li>.once: 事件只响应一次</li>
						<li>.self: 事件是自己触发时发生</li>
						<li>.capture: 父元素拦截事件</li>
						<li>.passive: 先处理事件默认行为，再处理自定义行为</li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section id="app">
					<button @click="f1">普通事件</button>
					<button @click="f2('苹果', $event)">传参事件</button>
					<button @click="f3($event,'香蕉')">传参事件 2</button>
				</section>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				methods: {
					f1(event) {
						util.appendLog('事件1 ' + event.target.tagName);
					},
					f2(name, event) {
						util.appendLog('事件2 ' + name + ' ' + event.target.tagName);
					},
					f3(event, name) {
						util.appendLog('事件3 ' + name + ' ' + event.target.tagName);
					}
				}
			});
		</script>
	</body>
</html>
